import {Component, OnInit, Input, EventEmitter, Output, OnChanges} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'kylin-set-polygon-style',
  templateUrl: './set-polygon-style.component.html',
  styleUrls: ['./set-polygon-style.component.css']
})
export class SetPolygonStyleComponent implements OnInit, OnChanges {
    @Input() showSetPolygonComponent;
    @Output() setPolgonStyleFun = new EventEmitter<any>();
    @Output() hideComponent = new EventEmitter<any>();
    color = '#ffcc33';
    polgonStyleForm: FormGroup;
    @Input() selectcolor;
  constructor(private fb: FormBuilder) { }

    ngOnChanges() {
        if (this.selectcolor === '#ffcc33' || this.selectcolor === '') {
            this.color = '#ffcc33'
        } else {
            this.color = this.selectcolor
        }
    }

    ngOnInit() {
        this.getStyleData()
    }

    getStyleData() {
        this.polgonStyleForm = this.fb.group({
            bordercolor: ['', [Validators.required]],
        })
    }

    handleAttrForm() {
        this.showSetPolygonComponent = false;
        this.hideComponent.emit(false);
    }

    submitAttrForm() {
        this.showSetPolygonComponent = false;
        this.setPolgonStyleFun.emit(this.polgonStyleForm.value)
    }

}
